<template>
    <div class="login-page">
        <div id="particles"></div>
        <div class="login-form" v-show="false">
            <el-form :model="loginForm" class="login-elform" ref="loginForm" label-position="left" label-width="0px">
                <div class="login-img">
                    <img src="../assets/img/logo1.png" />
                </div>

                <el-form-item prop="user_name">
                    <el-input v-model="loginForm.user_name" prefix-icon="el-icon-user-solid"
                        placeholder="登录账号" @keyup.native.enter.prevent="login"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="loginForm.password" type="password" prefix-icon="fa fa-lock"
                        placeholder="登录密码" @keyup.native.enter.prevent="login"></el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-row>
                        <el-col :span="14">
                            <el-input v-model="loginForm.code" prefix-icon="fa fa-lock"
                                placeholder="验证码" @keyup.native.enter.prevent="login"></el-input>
                        </el-col>
                        <el-col :span="9" style="float: right;line-height: 0;">
                            <img style="width: 100%; height: 40px;border-radius: 5px;"
                                class="pointer" :src="loginForm.src" @click="refreshCaptcha()" />
                        </el-col>
                    </el-row>

                </el-form-item>
                <el-form-item>

                    <el-button type="primary" style="width:100%;" @click.native.prevent="login"
                        :loading="loading">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="login-phone-form">
            <el-form :model="phoneLoginForm" :rules="loginPhoneRules" class="login-phone-elform" ref="phoneLoginForm" label-position="left" label-width="0px">
                <div class="login-phone-img">
                    <img src="../assets/img/logo1.png" />
                </div>

                <el-form-item prop="phone">
                    <el-input v-model="phoneLoginForm.phone" placeholder="请输入登录手机号" @keyup.native.enter.prevent="phoneLogin">
                        <!--<template slot="prepend">手机号</template>-->
                    </el-input>
                </el-form-item>

                <el-form-item prop="code">
                    <el-input v-model="phoneLoginForm.code" placeholder="请输入验证码" @keyup.native.enter.prevent="phoneLogin">
                        <!--<template slot="prepend">验证码</template>-->
                        <el-button slot="append" type="info" @click.prevent="sendCode" :loading="localCode.codeLoading">{{codeName()}}</el-button>
                    </el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" style="width:100%;" @click.native.prevent="phoneLogin" :loading="loading">登 录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import particles from 'particles.js'
import particlesJson from '@/assets/particles/particles.json'

export default {
    data() {
        return {
            loginForm: {
                user_name: '',
                src: '',
                password: '',
                code: '',

            },
            redirect: '/index',
            loading: false,
            localCode: {
                sendCount: 60,
                codeLoading: false,
            },
            phoneLoginForm: {
                phone: '',
                code: '',

            },
            loginPhoneRules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { min: 11, max: 11, message: '手机号长度11个字符', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'change' },
                    // { min: 4, max: 4, message: '验证码长度4个字符', trigger: 'blur' }
                ]
            },
        }
    },
    mounted: function () {
        particlesJS('particles', particlesJson);
    },
    created() {
        // this.refreshCaptcha()
        let localCodeInit = JSON.parse(localStorage.getItem('localCode'))
        if (localCodeInit) {
            this.localCode = localCodeInit
            this.sendInterval()
        }
    },
    methods: {
        refreshCaptcha: function () {
            this.loginForm.src = "/api/apiadmin/captcha?t=" + new Date().getTime();
        },
        login: function () {
            const loginData = this.loginForm;
            if (!loginData.user_name) {
                this.$message.error('用户名不得为空！');
                return false;
            }
            if (!loginData.password) {
                this.$message.error('密码不得为空！');
                return false;
            }
            if (!loginData.code) {
                this.$message.error('验证码不得为空！');
                return false;
            }
            this.loading = true;
            this.$store.dispatch("Login", loginData).then(() => {
                this.$router.push({
                    path: this.redirect || '/'
                })
            }).catch(() => {
                this.refreshCaptcha();
                this.loading = false;
            })

        },
        sendInterval() {
            if (this.localCode.sendCount === 0) {
                this.localCode.codeLoading = false
                this.localCode.sendCount = 60
            } else {
                this.localCode.sendCount--;
                setTimeout(() => {
                    localStorage.setItem('localCode', JSON.stringify(this.localCode))
                    this.sendInterval()
                }, 1000);
            }
        },
        codeName() {
            if (this.localCode.codeLoading) {
                return '重新发送(' + this.localCode.sendCount + ')'
            } else {
                return '获取验证码'
            }
        },
        sendCode() {
            if (!this.phoneLoginForm.phone) {
                this.$message.error('发送失败！请填写手机号码。')
                return false
            }
            this.phoneLoginForm.code = ''
            this.$store.dispatch('PhoneCode', { phone: this.phoneLoginForm.phone }).then(res => {
                console.log('phoneCode', res)
                this.$message.success('发送成功！')
                this.localCode.codeLoading = true
                localStorage.setItem('localCode', JSON.stringify(this.localCode))
                this.sendInterval()
            }).catch(() => {
                this.$message.error('发送失败！')
            })

        },
        phoneLogin() {
            this.$store.dispatch('PhoneLogin', this.phoneLoginForm).then(res => {
                console.log('PhoneLogin', res)
                this.$message.success('登录成功！')
                this.localCode.codeLoading = false
                this.localCode.code = 60
                localStorage.setItem('localCode', JSON.stringify(this.localCode))
                // this.sendInterval()
                this.$router.push({
                    path: this.redirect || '/'
                })
            })
        },


    }
}
</script>

<style lang="scss">
.login-page {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: url(../assets/bj.png);
    background-size: 100% 100%;

    #particles {
        position: absolute;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50% 50%;
        z-index: 2;
    }

    .login-form {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;

        .login-elform {
            width: 300px;
            padding: 20px;

            background: rgba(255, 255, 255, 1);
            border-radius: 5px;
        }

        .login-img {
            width: 150px;
            border-radius: 50px;
            height: 50px;
            position: relative;
            background: #007aff;
            left: 70px;
            top: -40px;
            text-align: center;
            line-height: 50px;

            img {
                width: 80%;
                margin-top: 10px;
            }
        }
    }

    .login-phone-form {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;

        .login-phone-elform {
            width: 300px;
            padding: 20px;

            background: rgba(255, 255, 255, 1);
            border-radius: 5px;
        }

        .login-phone-img {
            width: 150px;
            border-radius: 50px;
            height: 50px;
            position: relative;
            background: #007aff;
            left: 70px;
            top: -40px;
            text-align: center;
            line-height: 50px;

            img {
                width: 80%;
                margin-top: 10px;
            }
        }
    }
}
</style>
